<template>
    <div class="quick-use">
        <div
            class="code-box"
            v-for="(item, index) in data"
            :key="index">
            <div><t class="t1" :id="item.id || ''" v-html="item.title || ''"></t></div>
            <t :id="item.subTitle || ''" v-if="item.subTitle">{{ item.subTitle }}</t>
            <template v-if="item.des">
                <li v-for="d in item.des" :key="d" v-html="d"></li>
            </template>
            <pre-code :code="item.code"></pre-code>
        </div>
        <el-backtop target=".main-container"></el-backtop>
    </div>
</template>

<script>
/* eslint-disable max-len */
import { useStore } from 'vuex';
import { onMounted } from 'vue';

export default {
    name: 'QuickUse',
    setup() {
        const store = useStore();
        onMounted(() => { store.commit('updateArticleTree'); });

        return {
            data: [
                {
                    title: '引入 sibionics-ui-next',
                    id: '引入 sibionics-ui-next',
                    des: [
                        '你可以按照以下步骤在<span class="s-code">main.js</span>内进行引入',
                        '注意：使用该UI框架请确保将<span class="s-code">axios</span>挂载在<span class="s-code">Vue</span>的原型上，或使用<span class="s-code">app.provide</span>注册为全局提供者，以保证组件内部的自动请求接口获取数据的相关功能正常运行',
                    ],
                    code: // eslint-disable-next-line vue/script-indent
`import { createApp } from 'vue';
// 引入 element-plus
import ElementPlus from 'element-plus';
// 引入 element-plus 图标库
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
// 引入 element-plus 样式
import 'element-plus/dist/index.css';
// 引入 sibionics-ui-next
import sibionics from 'sibionics-ui-next';
// 引入 sibionics-ui-next 样式文件
import 'sibionics-ui-next/lib/index.css';

import axios from 'axios';
import router from './router';
import App from './App';

const app = createApp(App);

/** 全局注册 axios 以保证组件内部的自动请求接口获取数据的相关功能正常运行 */
// 方式一：将 axios 注册为全局提供者，命名名称为 $axios
// app.provide('$axios', axios);
// 方式二：将 axios 挂载在 app 原型上，命名名称为 $axios
app.config.globalProperties.$axios = axios;

// 注册 ElementPlus 图标组件
Object.keys(ElementPlusIconsVue).forEach((key) => app.component(key, ElementPlusIconsVue[key]));

app.use(ElementPlus).use(sibionics).use(router).mount('#app');
`,
                },
                {
                    title: '引入 Sibionics-UI 后，以下方法会挂载在基本数据类型的原型上',
                    subTitle: 'String.formatTime',
                    des: [
                        '你可以使用<span class="s-code">{n}</span>来截取时间字符串中的年月日时分秒，并进行任意组合',
                    ],
                    code: // eslint-disable-next-line vue/script-indent
`const dateTime = '2021-10-20 22:22:22';

const time1 = dateTime.formatTime('{0}年{1}月{2}日 {3}时{4}分{5}秒');
console.log(time1);
// '2021年10月20日 22时22分22秒'

const time2 = dateTime.formatTime('{0}-{1}');
console.log(time2);
// '2021-10'

const time3 = dateTime.formatTime('{3}-{4}');
console.log(time3);
// '22时22分'

const time4 = dateTime.formatTime('年：{0} 时：{3}');
console.log(time4);
// '年: 2021 时: 22'
`,
                },
                {
                    subTitle: 'Number.toFixed',
                    des: [
                        '<span class="s-code">toFixed(precision, lang, options)</span>',
                        '该方法是基于原基础数据类型<span class="s-code-gray">Number</span>原型上的<span class="s-code">toFixed</span>方法进行重写，<span class="s-code">toFixed</span>原本是四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为奇应舍去，五前为偶要进一。现在我们将其改为常用标准的四舍五入了，方法使用规则与原来一样',
                        '该方法除了传入精度参数以外，还额外拓展了两个参数；lang 表示语言，传了语言参数后，将会自动将数值转换为对应语言的展示形式；options 可参照toLocaleString的第二个参数配置',
                    ],
                    code: // eslint-disable-next-line vue/script-indent
`const number = 0.235;

// 引入sibionics之前
console.log(number.toFixed(2));  // 0.23

// 引入sibionics之后
console.log(number.toFixed(2));  // 0.24
// 'fr' | 'fr-FR'  法语的小数点为逗号
console.log(number.toFixed(2, 'fr'));  // 0,24
`,
                },
                {
                    title: '以下对象会挂载在 window 上',
                    subTitle: 'NProgress',
                    des: [
                        '它的作用是在浏览器顶部模拟展示数据加载的进度条',
                        // eslint-disable-next-line max-len
                        '该对象提供了<span class="s-code">start</span>和<span class="s-code">done</span>表示开始和结束加载进度的两个方法，一般可配置在<span class="s-code-gray">axios</span>接口拦截处或者<span class="s-code-gray">router.beforeEach</span>路由守卫里面',
                    ],
                    // eslint-disable-next-line vue/script-indent
                    code: `// axios.js

import axios from 'axios';

const Axios = axios.create();

// 在 request 拦截器中，展示进度条
axios.interceptors.request.use(
    config => {
        window.NProgress.start();
        return config;
    }
);

// 在 response 拦截器中，隐藏进度条
axios.interceptors.response.use(
    config => {
        window.NProgress.done();
        return config;
    }
);
`,
                },
                {
                    title: '以下对象会挂载在 window.SIB 上',
                    subTitle: 'deepCopy',
                    des: [
                        '该方法的作用是对对象进行深拷贝',
                    ],
                    code: // eslint-disable-next-line vue/script-indent
`const { deepCopy } = window.SIB;
const obj = { a: 1, b: 2 };

const obj1 = obj;
console.log(obj1);    // { a: 1, b: 2 }

const obj2 = deepCopy(obj);
console.log(obj2);    // { a: 1, b: 2 }

obj.a = 999;

console.log(obj);    // { a: 999, b: 2 }
console.log(obj1);    // { a: 999, b: 2 }
console.log(obj2);    // { a: 1, b: 2 }
`,
                },
                {
                    subTitle: 'copyToClipboard',
                    des: [
                        '该方法的作用是将传入的值复制到粘贴板上',
                    ],
                    code: // eslint-disable-next-line vue/script-indent
`const value = { a: 1, b: 2 };
window.SIB.copyToClipboard(value);
// { a: 1, b: 2 } 已复制到粘贴板上
`,
                },
                {
                    subTitle: 'formatDate',
                    des: [
                        '该方法是用于格式化日期数据，返回指定格式的日期字符串',
                        '它接收两个参数，第一个为日期对象<span class="s-code">Date</span>或者<span class="s-code">日期字符串</span>，第二个为需要格式化的规则<span class="s-code">rule</span>',
                        '规则示例: <span class="s-code-gray">YYYY-MM-DD hh:mm:ss:S q</span>',
                    ],
                    code: // eslint-disable-next-line vue/script-indent
`const { formatDate } = window.SIB;
// 示例1:
// rule 默认为 YYYY-MM-DD
const value = formatDate(new Date());
console.log(value);
// '2023-05-26'

// 示例2:
const rule = 'YYYY年MM月DD日 hh时mm分ss秒S毫秒 第q季度';
const value = formatDate(new Date(), rule);
console.log(value);
// '2023年05月26日 10时07分09秒7毫秒 第2季度'

// 示例3:
const rule = 'D/M/YY h点';
const value = formatDate('2023-05-01 08:56', rule);
console.log(value);
// '1/5/23 8点'
`,
                },
                {
                    subTitle: 'formatMoney',
                    des: [
                        '该方法的作用是格式化金额数字',
                        '它接收两个参数，第一个为需要格式化的数值<span class="s-code">amount</span>，其类型为<span class="s-code-gray">Number</span>或为<span class="s-code-gray">String</span>类型的数值，第二个为需要保留的小数位数<span class="s-code">n</span>',
                    ],
                    code: // eslint-disable-next-line vue/script-indent
`const { formatMoney } = window.SIB;
const money = 10086.123;
const value = formatMoney(money, 2);
console.log(value);  // 10,086.12
`,
                },
                {
                    subTitle: 'download',
                    des: [
                        '该方法的作用是下载附件，例如导出Excel/PDF/Word，下载图片等等，它接收两个参数',
                        '第一个为附件<span class="s-code">url</span>或者<span class="s-code">Blob</span>对象',
                        '第二个为保存文件的名称<span class="s-code">name</span>，需要带文件后缀名，非必传；它默认会从请求响应头<span class="s-code-gray">Content-Disposition</span>中截取<span class="s-code-gray">filename</span>当做文件名称(注意: 后台需配置该响应头字段允许被前端获取)',
                    ],
                    code: // eslint-disable-next-line vue/script-indent
`// 根据 url 下载附件
const fileSrc = "http://www.bearsee.com.cn/images/catcher-grain.jpg";
window.SIB.download(fileSrc);

// 根据 Blob 对象 下载附件
const blob = new Blob(['<a id="a"><b id="b">hello world!</b></a>'], { type : "text/html" });
window.SIB.download({ data: blob }, "demo.html");
`,
                },
                {
                    subTitle: 'getuuid',
                    des: [
                        '该方法的作用是获取随机<span class="s-code">uuid</span>',
                    ],
                    code: // eslint-disable-next-line vue/script-indent
`// 获取随机uuid
const uuid = window.SIB.getuuid();
console.log(uuid);
// 7972e6a3-c0f5-4d8d-b7bb-28c238f82b0e
`,
                },
                {
                    subTitle: 'getCertainDate',
                    des: [
                        '用于获取距离今日<span class="s-code">n</span>天的日期',
                        '它接收两个参数，第一个为距离今天的天数<span class="s-code">day</span>，类型为<span class="s-code-gray">Number</span>，可以为负数，第二个为返回的日期格式规则<span class="s-code">rule</span>',
                        '规则示例: <span class="s-code-gray">YYYY-MM-DD hh:mm:ss:S q</span>',
                    ],
                    code: // eslint-disable-next-line vue/script-indent
`const { getCertainDate } = window.SIB;

// 默认获取今天日期，rule 默认为 YYYY-MM-DD
const date1 = getCertainDate();
console.log(date1);
// '2023-05-26'

// 第一个参数传0，相当于获取今天的日期
const date2 = getCertainDate(0, "YYYY年MM月DD日 hh时mm分ss秒S毫秒 第q季度");
console.log(date2);
// '2023年05月26日 10时49分24秒846毫秒 第2季度'

// 获取后天的日期
const date3 = getCertainDate(2, "YYYY-MM-DD hh:mm");
console.log(date3);
// '2023-05-28 10:50'

// 获取前三天的日期
const date4 = getCertainDate(-3);
console.log(date4);
// '2023-05-23'`,
                },
                {
                    subTitle: 'repairAccuracy',
                    des: [
                        '该方法的作用是将数值在运算后丢失精度的结果转为正常值',
                        '它接收两个参数，第一个为需要处理的数值<span class="s-code">num</span>，其类型为<span class="s-code-gray">Number</span>或者是<span class="s-code-gray">String</span>类型的数值，第二个是输出的结果需要保留的小数位数<span class="s-code">n</span>',
                    ],
                    code: // eslint-disable-next-line vue/script-indent
`const { repairAccuracy } = window.SIB;
const num1 = 0.1 + 0.2;
const num2 = repairAccuracy(0.1 + 0.2);
const num3 = repairAccuracy(0.1028 + 0.2342,  2);

console.log(num1);
// 0.30000000000000004

console.log(num2);
// 0.3

console.log(num3);
// 0.34
`,
                },
                {
                    subTitle: 'isMobilePhone',
                    des: [],
                    code: // eslint-disable-next-line vue/script-indent
`const { isMobilePhone } = window.SIB;
const bool = isMobilePhone("18888888888");
console.log(bool);
// true
`,
                },
                {
                    subTitle: 'isTelephone',
                    des: [],
                    code: // eslint-disable-next-line vue/script-indent
`const { isTelephone } = window.SIB;
const bool = isTelephone("0755-88888888");
console.log(bool);
// true
`,
                },
                {
                    subTitle: 'isEmail',
                    des: [],
                    code: // eslint-disable-next-line vue/script-indent
`const { isEmail } = window.SIB;
const bool = isEmail("123456@163.com");
console.log(bool);
// true
`,
                },
                {
                    subTitle: 'isIdentityCode',
                    des: [],
                    code: // eslint-disable-next-line vue/script-indent
`const { isIdentityCode } = window.SIB;
const bool = isIdentityCode("430321199503106666");
console.log(bool);
// false (校验位错误)
`,
                },
            ],
        };
    },
};
</script>

<style lang="scss">

.quick-use {
  .code-box {
    padding: 15px 0;
  }
  pre {
    display: flex;
  }
}
</style>
